<template>
  <div class="main-content">
    <div style="display: flex; grid-gap: 10px; align-items: flex-start;">
      <div class="card" style="flex: 1">
        <div
          v-for="item in followingList"
          :key="item.postId"
              >
          <el-row :gutter="20"
                  style="display: flex;
                  grid-gap:15px;
                  padding: 15px 0;
                  border-bottom: 1px solid #dddddd">
            <el-col :span="2" >
              <el-avatar :src="item.avatar" :size="60" @click="goToProfile(item.followedUserId)" class="avatar-wrapper"></el-avatar>
            </el-col>

            <el-col :span="20" >
              <h4 @click="goToProfile(item.followedUserId)" class="hover-underline"> {{ item.name }}</h4>
            </el-col>

            <el-col :span="2" style="display: flex; align-items: center;">
              <el-button
                :type="isFollowing ? 'info' : 'primary'"
                @click="toggleFollow(item.followedUserId)"
                :disabled="loading"
              >
              {{isFollowing ? '已关注' : '关注' }}
              </el-button>
            </el-col>
          </el-row>
        </div>
        <div v-if="total===0" style="padding: 29px 0; text-align: center;font-size: 16px; color: #666">暂无收藏</div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getUserList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {delFollowing, userList} from "@/api/forum/following";

export default {
  name:"FollowUser",
  mounted() {
    // 初始化用户
    this.getUserList()
  },
  data() {
    return {
      isFollowing: true,
      // 遮罩层
      loading: true,
      total: 0,
      // 用户关注表表格数据
      followingList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        followedUserId: null,
        createdAt: null,
        status: null,
      },
    }
  },
  methods: {
    // 跳转到用户个人信息页
    goToProfile(userId) {
      this.$router.push({
        name: "followProfile",
        params: {id: userId.toString()},
      })
    },
    // 关注的用户
    getUserList(){
      this.queryParams.userId= this.$route.params.userId
      userList(this.queryParams.userId).then(response => {
        this.followingList= response.rows;
        console.log("this.followingList", this.followingList)
        this.total = response.total;
        this.$emit('updateTotal', this.total);
        this.loading = false;
      })
    },
    toggleFollow(followedUserId) {

      if (this.loading) return;
      // 弹出确认对话框
      this.$confirm('确定要取消关注吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击【确定】
        this.loading = true;
        // 调用 API 取消关注
        delFollowing(followedUserId).then(() => {
            // 成功后可以刷新列表或更新状态
            this.$message.success('取消关注成功');
            // 示例：刷新关注列表
            this.getUserList(); // 加载关注列表的方法
          })
          .catch(error => {
            console.error('取消关注失败:', error);
            this.$message.error('取消关注失败，请稍后再试');
          })
      }).catch(() => {
        // 用户点击【取消】或关闭对话框，不做任何操作
        this.$message.info('已取消操作');
      });
    },
  },
};
</script>

<style scoped>
.el-avatar {
  margin-right: 10px;
}
.card {
  width: 50%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  padding: 15px;
}
 .hover-underline {
   text-decoration: none; /* 默认无下划线 */
   color: #333; /* 可选：设置文字颜色 */
   cursor: pointer;
 }

.hover-underline:hover {
  text-decoration: underline; /* 鼠标悬停时出现下划线 */
}
.avatar-wrapper {
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
/*页面具体样式*/
.main-content{
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}
</style>

